<section class="demo-section">
  <d-toast [value]="msgs"></d-toast>
  <div>
    <form
      dForm
      ngForm
      [dValidateRules]="formRules.rule"
      [layout]="layoutDirection"
      #userForm="dValidateRules"
      (dSubmit)="submitForm($event)"
    >
      <d-form-item>
        <d-form-label [required]="true">Username</d-form-label>
        <d-form-control>
          <input
            dTextInput
            autocomplete="off"
            name="username"
            placeholder="Enter a user name you like"
            [(ngModel)]="formData.userName"
            [dValidateRules]="formRules.usernameRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Password</d-form-label>
        <d-form-control>
          <input
            dTextInput
            dValidateSyncKey="password"
            type="password"
            name="password"
            [(ngModel)]="formData.password"
            placeholder="Enter a password of 6 to 15 characters"
            [dValidateRules]="formRules.passwordRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Confirm Password</d-form-label>
        <d-form-control>
          <input
            dTextInput
            dValidateSyncKey="password"
            type="password"
            name="confirmPassword"
            [(ngModel)]="formData.confirmPassword"
            placeholder="Confirm and enter"
            [dValidateRules]="formRules.confirmPasswordRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true" style="margin-right: 8px" dFormSubmit
          >Register</d-button
        >
        <d-button bsStyle="common" circled="true" dFormReset>Reset</d-button>
      </d-form-operation>
    </form>
  </div>
</section>
